/*
 * @Author: zhouc 
 * @Date: 2024-04-19 09:57:53 
 * @Function: 细则以及打分说明
 * @Last Modified by: zhouc
 * @Last Modified time: 2024-04-19 09:58:13
 */
<template>
  <div class="evaluation-criteria-container">
    <van-tabs v-model:active="rec.active">
      <van-tab title="打分说明">
        <div class="html-content" v-html="rec.content"></div>
      </van-tab>

      <van-tab title="打分细则">
        <div class="deduct-points">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              v-for="item in rec.behaviorList"
              :key="item.id"
              :title="item[0].category"
              :name="item[0].category"
            >
              <div class="evaluation-box">
                <div
                  v-for="(categoryItem) in item"
                  :key="categoryItem.id"
                  class="evaluation-sec"
                >
                  <div class="title">
                    {{ categoryItem.categoryName }}
                  </div>
                  <div
                    class="result"
                    v-for="(item, itemIndex) of categoryItem.children"
                    :key="item.description"
                  >
                    <div class="result-title">
                      {{ itemIndex + 1 }}. {{ item.description }}
                    </div>
                    <div class="score-box">
                      扣除分值：<span>{{ item.score }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { getRuleDesc, queryBehavior } from "@/service/modules/evaluation";

document.title = "打分准则";

const activeNames = ref(["1"]);

const rec = reactive({
  active: 0,
  content: "",
  behaviorList: [],
});

onMounted(() => {
  getRuleDesc("GZSM").then((res) => {
    if (res.code === 0) {
      rec.content = res.data.ruleDesc;
    }
  });

  queryBehavior({ pageNum: 1, pageSize: 100 }).then((res) => {
    if (res.code === 0) {
      rec.behaviorList = res.rows;
      const result = res.rows.filter((value, index, self) => {
        const mark =
          index ===
          self.findIndex(
            (item) =>
              item.category === value.category &&
              item.categoryName === value.categoryName
          );

        if (mark) {
          const second = res.rows.filter(
            (item) =>
              item.category === value.category &&
              item.categoryName === value.categoryName
          );
          value.children = second;
          return mark;
        }
      });

      rec.behaviorList = result.reduce((acc, cur) => {
        const index = acc.findIndex(
          (item) => item[0].category === cur.category
        );
        if (index === -1) {
          acc.push([cur]);
        } else {
          acc[index].push(cur);
        }

        return acc;
      }, []);
    }
  });
});
</script>

<style lang="less" scoped>
.evaluation-criteria-container {
  width: 100%;

  .html-content {
    padding: 16px 16px 0 16px;
  }

  .deduct-points {
    padding: 8.5px 16px 0 16px;

    .evaluation-box {
      margin-bottom: 8px;
      .evaluation-sec {
        background-color: #f7f9fc;
        border-radius: 10px;
        margin-bottom: 8px;
        padding: 1px 16px 12px 16px;
      }

      .title {
        line-height: 14px;
        font-size: 12px;
        color: #c2c6cc;
        font-weight: 500;
        margin-top: 10px;
      }

      .result {
        margin-top: 8px;

        .result-title {
          font-size: 12px;
          line-height: 14px;
          color: #303233;
          margin-bottom: 2px;
        }

        .score-box {
          font-size: 12px;
          color: #919599;
          line-height: 14px;

          span {
            color: #fa5646;
          }
        }
      }
    }
  }

  /deep/ .van-tab {
    font-size: 17px;
  }

  /deep/ .van-tabs__line {
    width: 24px;
    height: 3px;
    background-color: #3e77fa;
  }

  /deep/ .van-tab--active {
    .van-tab__text {
      color: #303233;
      font-weight: 500;
    }
  }
}
</style>
